<html>
  <body>
    <button type="button" onclick="method1()">箭头函数测试</button>
    <button type="button" onclick="method2()">Js 闭包测试</button>
    <button type="button" onclick="method3()">变量提升测试</button>
    <button type="button" onclick="method4()">proxy 测试</button>
    <button type="button" onclick="method5()">prototype 测试</button>

    <script type="text/javascript">
      // 原始写法
      method1 = function () {
        alert("hellow world!");
      };
      // Es6 箭头函数
      method1 = () => alert("箭头函数写法！");

      var name = "lisi";
      let obj = {
        name: "zhangsan",
        f1: () => {
          console.log(this); // window对象
          console.log(this.name); // lisi
        },
        f2: function () {
          console.log(this); // obj
          console.log(this.name); // zhangsan
        },
        f2: function () {
          console.log(this); // obj
          console.log(this.name); // zhangsan
        },
      };
      obj.f1();

      method2 = function () {
        let name = "张三";
        display = function () {
          alert(name);
        };
        display();
      };

      method3 = function () {
        a = 2;
        var a;
        console.log(a);
      };

      var myHandler = {
        get: function (target, name) {
          return name in target ? target[name] : "没有这个属性";
        },
      };
      //    proxy 测试
      method4 = function () {
        var p = new Proxy({}, myHandler);
        p.a = 1;
        p.b = 2;

        console.log(p.a);
        console.log(p.b);
        console.log(p.c);
      };

      // prototype 测试 
      // 构造函数
      function Preson(name, age) {
        this.name = name;
        this.age = age;
      }
      method5 = function () {
        // 所有实例共享的公共方法
        debugger
        Preson.prototype.say = function (word) {
            console.log(`${this.name}说：${word}`);
        }
        const p1 = new Preson('张三', 18); // 创建一个Person实例对象
        p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
      }
    </script>
  </body>
</html>
